<!-- 这是一个餐饮信息页面 -->
<template>
   <div>
			<div>
				<div class="eatList">
					<div class="areaTitle">四季花海</div>
					<div class="grid">
						<div class="pic grid-cell-2"><img class="img" src="http://47.93.99.8:81/img/11.jpg" /></div>
						<div class="detail grid-cell-3">
							<div class="detailTitle">云南第一碗</div><hr class="underline" />
							<div class="detailInfo">来到云南的游客，都不会忘记品尝过桥米线。步入欢乐世界，进入五彩斑斓的四季花海，首先映入眼帘的是高耸入云的孔雀型摩天轮——滇池之眼，声名远扬的过桥米线主营店——云南第一碗就位于其下方。所属菜系滇菜，凡是来云南旅游的人，可不要错过~</div>
						</div>
					</div>
				</div>				
				<div class="eatList grid">
					<div class="pic grid-cell-2"><img class="img" src="http://47.93.99.8:81/img/22.jpg" /></div>
					<div class="detail grid-cell-3">
						<div class="detailTitle">云南汽锅鸡</div><hr class="underline" />
						<div class="detailInfo">主要食材是鸡肉，主要烹饪工艺是蒸，有补虚养身、补血、健脾开胃的功效。通过独特的汽锅蒸制整鸡，最大程度保留营养成分，炮制食材的原汁原味。汽锅鸡因为其营养丰富深受广大群众的喜爱。2018年9月，被评为“中国菜”之云南十大经典名菜。</div>
					</div>
				</div>
				<div class="eatList grid">
					<div class="pic grid-cell-2"><img class="img" src="http://47.93.99.8:81/img/33.jpg" /></div>
					<div class="detail grid-cell-3">
						<div class="detailTitle">乐饮吧</div><hr class="underline" />
						<div class="detailInfo">澄澈静谧的昆明湖畔的乐饮吧，一定是乐园内放松休憩的首选之所。主营格式经典咖啡、精致美味的烘焙、西点、清新的果汁、饮料。点一杯咖啡，配一份甜点，昆明湖上波光泛起，空气中夹杂着丝丝甜味，一切烦恼抛之脑后，享受惬意的宁静时光。夜幕降临，露台上的座椅早已准备好。抬头是繁星点点的夜空，低头，又见昆明湖上曼妙的水秀已起，真是难得甜蜜~</div>
					</div>
				</div>
			</div>
			<div>
				<div class="eatList">
					<div class="areaTitle">幻滇奇城</div>
					<div class="grid">
						<div class="pic grid-cell-2"><img class="img" src="http://47.93.99.8:81/img/44.jpg" /></div>
						<div class="detail grid-cell-3">
							<div class="detailTitle">麦当劳</div><hr class="underline" />
							<div class="detailInfo">别具一格的麦当劳餐厅，外观采用江南画舫船的设计，在湖上餐厅享用麦当劳，美味加倍哦~</div>
						</div>
					</div>
				</div>
				
				<div class="eatList grid">
					<div class="pic grid-cell-2"><img class="img" src="http://47.93.99.8:81/img/55.jpg" /></div>
					<div class="detail grid-cell-3">
						<div class="detailTitle">老昆明小吃</div><hr class="underline" />
						<div class="detailInfo">米线是每一个昆明人自小喜爱的美食，代表着老昆明人生活中的饮食情结。随着时间的推移，米线的吃法变得五花八门，但是最经典的当小锅米线莫属。昆明人的记忆都在这里汇聚，一碗小锅米线，朴素却又充满情怀。</div>
					</div>
				</div>
				
				<div class="eatList grid">
					<div class="pic grid-cell-2"><img class="img" src="http://47.93.99.8:81/img/66.jpg" /></div>
					<div class="detail grid-cell-3">
						<div class="detailTitle">小刀鸭</div><hr class="underline" />
						<div class="detailInfo">位于幻滇奇域的云南小刀鸭餐厅，将云南鸭子的特色做到极致，鸭肉选用云南特有的品种小麻鸭，主产地滇中宜良县，鸭龄在四十天以内。小刀鸭经过二十分钟的烤制，焦黄的皮色透着浓香，小小的鸭身只有人的拳头大小，配上长长的细脖子和鸭头，就像一柄长把青铜小刀。。</div>
					</div>
				</div>
			</div>
			
			
			
			
			
			<div>
				<div class="eatList">
					<div class="areaTitle">童梦世界</div>
					<div class="grid">
						<div class="pic grid-cell-2"><img class="img" src="http://47.93.99.8:81/img/77.jpg" /></div>
						<div class="detail grid-cell-3">
							<div class="detailTitle">欢乐美食坊</div><hr class="underline" />
							<div class="detailInfo">散发着快乐气息的欢乐美食坊一共有五个美食档口，提供丰富多样的选择。烤肉、薯饼、蒸饺、配上可爱的动物造型套餐……从口味和颜值上征服各位宝贝。</div>
						</div>
					</div>
				</div>
			</div>
			
			
			
			
			<div>
				<div class="eatList">
					<div class="areaTitle">洪荒秘境</div>
					<div class="grid">
						<div class="pic grid-cell-2"><img class="img" src="http://47.93.99.8:81/img/88.jpg" /></div>
						<div class="detail grid-cell-3">
							<div class="detailTitle">彝家小馆</div><hr class="underline" />
							<div class="detailInfo">情好客的彝族人民，其饮食不仅有特别的民族习惯，更具有山里的芬芳。位于洪荒秘境的彝家小馆牛汤锅餐亭的彝族特色牛汤锅配上、米线、面条，大碗汤面上撒上薄荷，香菜，那香气令人垂涎欲滴，乐而忘返。</div>
						</div>
					</div>
				</div>
				
				<div class="eatList grid">
					<div class="pic grid-cell-2"><img class="img" src="http://47.93.99.8:81/img/99.jpg" /></div>
					<div class="detail grid-cell-3">
						<div class="detailTitle">烧烤部落</div><hr class="underline" />
						<div class="detailInfo">滇式烧烤与北方烧烤有着天壤之别，这里有更多的食材，更多的手段，调味料更是多种多样。它们都有着别具一格的特性，只有亲身体验过，才能明白其中的美妙。烧烤部落的菜品丰富且独特，既有勐海小烤鸡、香茅草烤鱼这类具有地方风味的特色烧烤，还有烤猪脚、烤五花肉、烧洋芋、包烧金针菇等融入云南文化的各类风味烧烤。云南的天气四季如春，清风习习，最是适合吃烧烤。。</div>
					</div>
				</div>
			</div>
			
			
			
		</div>

</template>
<style>
	.grid{
				display: flex;
				flex-flow: row nowrap;
				justify-content: space-around; 
			}
			.grid-cell-1,
			.grid-cell-2,
			.grid-cell-3,
			.grid-cell-4,
			.grid-cell-5,
			.grid-cell-6{
				flex-shrink: 1;
			}
			.grid-cell-1{flex-grow: 1;}
			.grid-cell-2{flex-grow: 2;}
			.grid-cell-3{flex-grow: 3;}
			.grid-cell-4{flex-grow: 4;}
			.grid-cell-5{flex-grow: 5;}
			.grid-cell-6{flex-grow: 6;}
			
			
			.areaTitle{
				text-align: center;
				font-size: 3rem;
				font-family: 华文行楷;
				margin: 30px;
				margin-top: 10px;
			}
			.eatList{
				width: 80%;
				margin: auto;
				box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.2) ;
				padding: 30px;
				border-radius: 10px;
				margin-top: 30px;
				
			}
			.img{
				width: 430px;
				height: 280px;
				box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.1) ;/* box-shadow:x y 模糊半径 扩散半径  颜色 */
			}
			.detail{margin: 5px;}
			.detailTitle{
				margin-left: 30px;
				font-size: 1.8rem;
				letter-spacing: 8px;
			}
			.underline{
				background-color: coral;
				height: 2px;
				margin: 20px;
				border: none;
			}
			.detailInfo{
				font-size: 1.2rem;
				line-height: 2rem;
				margin: 20px;
				letter-spacing: 2px;
				
			}
			
			/* 当网页小于800px,详细信息消失 */
			@media screen and (max-width:800px) {
				.detailInfo{display: none;}
			}
			/* 当网页小于600px,详细标题消失 */
			@media screen and (max-width:600px) {
				.detailTitle{display: none;}
			}
</style>	
<script>
export default {
    data() {
        return {
           
        }
    },
    methods: {
      

        
    }

}
</script>
